<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>async函数和await_解决回调函数地狱</title>
</head>

<body>
  <form>
    <span>省份：</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市：</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区：</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：掌握async和await语法，解决回调函数地狱
     * 概念：在async函数内，使用await关键字，获取Promise对象"成功状态"结果值
     * 注意：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）
    */

    // 彻底解决回调地域问题  没有回调函数了---常用
    // 语法趟 简化语法  内部还是使用promse 封装的  
    async function getData() {
      // await强制等待 promise(异步操作的状态并获取到结果值)
      try {
        //  await等待Promise对象成功的结果
        const res = await axios({ url: "http://hmajax.itheima.net/api/province" })
        console.log(res);
        // 获取到第一个省份
        const pname = res.data.list[0]
        const res2 = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } })
        const cname = res2.data.list[0]
        const res3 = await axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })
        console.log(res3.data.list);
        // 直接使用tey  catch捕获错误
      } catch (error) {
        console.log(error);
      }

    } getData()
    // 使用async   函数返回一个 promise

  </script>
</body>

</html>